<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="./js/antd/antd.css" rel="stylesheet" />
    <!-- 引入react 核心库 -->
    <!-- <script src="./js/antd/react.production.min.js"></script> -->
    <!-- 引入react-dom,用于支持react操作DOM -->
    <!-- <script src="./js/antd/react-dom.production.min.js"></script> -->
    <!-- <script src="./js/antd/antd-with-locales.js"></script> -->
  </head>
  <body>
    <div id="box"></div>
  </body>
  <script src="./js/sweetalert.js"></script>
  <!-- 引入react 核心库 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.0/umd/react.production.min.js"></script>
  <!-- 引入react-dom,用于支持react操作DOM -->
  <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.0/umd/react-dom.production.min.js"></script>
  <!-- <script src="https://lib.baomitu.com/antd/4.11.2/antd-with-locales.js"></script> -->
  <script src="./js/antd/antd-with-locales.js"></script>
  <!-- 引入babel ,用于将jsx 转为js -->
  <script src="./js/babel.min.js"></script>

  <script type="text/babel">
    // swal("这是一个信息提示框!");

    const { Button } = antd;

    class App extends React.Component {
      // 构造器只调用一次，并且构造器可以省略不写
      constructor(props) {
        super(props);
        console.log(this.props);
        this.state = {
          isHot: "123",
          status: "我好饿啊",
          date: new Date(),
          timer: null,
          inputValue: 0,
          msg: "你好，我是父组件的数据",
          colors1: ['#6253E1', '#04BEFE'],
        };
      }
      // 对标签属性进行类型、必要性的限制
      static propTypes = {
        person: {
          // name: PropTypes.string.isRequired,
          // age: PropTypes.number,
          // sex: PropTypes.string
        },
      };
      // 指定默认标签属性值
      static defaultProps = {
        person: {
          sex: "男",
          age: 18,
        },
        interest: "舞蹈、音乐、写作",
      };
      // state = {
      //   isHot: "123",
      //   status: '我好饿啊',
      //   date: new Date(),
      //   timer: null
      // }
      init() {
        console.log('init')
      }
      InputChange(event) {
        this.setState(
          {
            inputValue: 123123,
          },
          () => {
            console.log(
              "setState函数执行完了才执行（页面更新口才获取dom要在这里）"
            );
          }
        );
      }
      getMessage(msg) {
        this.setState({
          msg: msg,
        });
      }
      //组件挂载到页面上时执行
      componentDidMount() {
        this.state.timer = setInterval(() => {
          this.setState({ date: new Date() });
        }, 1000);
      }
      //子组件拥有props才有的生命周期(父组件没有)
      componentWillReceiveProps() {
        console.log("componentWillReceiveProps");
      }
      componentWillUnmount() {
        clearInterval(this.state.timer);
      }
      getSnapshotBeforeUpdate(prevProps, prevState) {
        console.log("更新之前获取快照,getSnapshotBeforeUpdate~");
        return "Snapshot: abc";
      }
      render() {
        return (
          <div>
            <h1> hello react </h1>
            <input type="text" />
            <span>
              Time Now ： {this.state.date.toTimeString()}
              <input type="text" />
            </span>
            <div>data：{this.state.msg}</div>
            <Item getMessage={this.getMessage.bind(this)}></Item>
            <Input></Input>
            {/* 按钮组 */}
            <Button type="primary">
              Loading
            </Button>
            <br />
            {this.state.colors1.map((color)=>{
              return <Button type="primary">
                Loading
              </Button>
            })}
          </div>
        );
      }
      //子组件拥有props才有的生命周期(父组件没有)
      componentWillReceiveProps() {
        console.log("componentWillReceiveProps");
      }
      //组件更新之前执行并且在shouldComponentUpdate之后
      componentWillUpdate() {
        console.log("componentWillUpdate");
      }
      //组件更新完成时候执行
      componentDidUpdate() {
        console.log("componentDidUpdate");
      }
      //卸载组件时执行
      componentWillUnmount() {
        console.log("componentWillUnmount");
      }
    }

    class Item extends React.Component {
      constructor(props) {
        super();
        this.state = {};
      }
      render() {
        return (
          <div className="Item" onClick={() => this.toparent()}>
            我是Item123123123123123123123123123123123123123组件
            {this.props.content}
          </div>
        );
      }
      //子组件拥有props才有的生命周期(父组件没有)
      componentWillReceiveProps() {
        console.log("componentWillReceiveProps");
      }
      //卸载组件时执行
      componentWillUnmount() {
        console.log("componentWillUnmount");
      }
      toparent() {
        const data = "啦啦啦啦啦啦啦啦啦啦啦啦啦";
        this.props.getMessage(data);
      }
    }

    //
    class Input extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          username: "",
          password: "",
        };
        this.handleChangename = this.handleChangename.bind(this);
        this.handleChangepwd = this.handleChangepwd.bind(this);
        this.up = this.up.bind(this);
      }
      handleChangename(event) {
        // 读取输入的值
        const username = event.target.value;
        //   更新状态
        this.setState({ username });
      }
      handleChangepwd(event) {
        const password = event.target.value;
        this.setState({ password });
      }
      up() {
        console.log(this.state);
      }

      render() {
        return (
          <div>
            姓名：
            <input
              value={this.state.username}
              onChange={this.handleChangename}
            />
            密码：
            <input
              type="password"
              value={this.state.password}
              onChange={this.handleChangepwd}
            />
            <input type="submit" value="登录" onClick={this.up} />
          </div>
        );
      }
    }

    ReactDOM.render(<App />, document.getElementById("box"));
  </script>
</html>
